<template>
    <div id="app">
    <div class="container">
      <div class="header">
        <h1>幸运大抽奖</h1>
        <p>转动转盘，赢取豪华大奖！每一次转动都可能改变您的命运</p>
      </div>
      
      <div class="luckdraw-container">
        <div class="wheel-section">
          <div class="wheel-container">
            <div class="wheel-pointer"></div>
            <div 
              class="wheel" 
              :style="{ transform: `rotate(${wheelRotation}deg)` }"
            >
              <div 
                v-for="(prize, index) in prizes" 
                :key="index"
                class="wheel-item"
                :style="{
                  transform: `rotate(${index * (360 / prizes.length)}deg)`,
                  background: getWheelItemColor(index)
                }"
              >
                <div>
                  <i :class="prize.icon"></i>
                  <div>{{ prize.name }}</div>
                </div>
              </div>
            </div>
            <div 
              class="wheel-center"
              @click="startDraw"
            >
              <i class="fas fa-gift" style="font-size: 36px;"></i>
            </div>
          </div>
        </div>
        
        <div class="prizes-section">
          <h2 class="section-title">奖品展示</h2>
          <div class="prizes-grid">
            <div 
              v-for="(prize, index) in prizes" 
              :key="index"
              class="prize-item"
              :style="{ borderColor: getWheelItemColor(index) }"
            >
              <div class="prize-icon">
                <i :class="prize.icon"></i>
              </div>
              <div class="prize-name">{{ prize.name }}</div>
              <div class="prize-value">{{ prize.value }}</div>
            </div>
          </div>
        </div>
        
        <div class="result-section">
          <h2 class="section-title">抽奖结果</h2>
          <div class="result-content">
            <div v-if="drawing" class="drawing-animation">
              <i class="fas fa-spinner fa-spin" style="font-size: 48px; color: #ffd700;"></i>
              <div style="margin-top: 20px; font-size: 20px;">抽奖中，请稍候...</div>
            </div>
            
            <div v-else-if="result" class="result-prize">
              <div class="result-icon">
                <i :class="result.icon"></i>
              </div>
              <div class="result-text">
                <div class="result-name">恭喜您获得: {{ result.name }}</div>
                <div class="result-value">{{ result.value }}</div>
              </div>
            </div>
            
            <div v-else class="no-result">
              <i class="fas fa-gift" style="font-size: 48px; color: #ffd700;"></i>
              <div style="margin-top: 20px; font-size: 20px;">点击转盘开始抽奖</div>
            </div>
          </div>
          
          <button 
            class="draw-btn"
            @click="startDraw"
            :disabled="drawing"
          >
            {{ drawing ? '抽奖中...' : '开始抽奖' }}
          </button>
        </div>
      </div>
    </div>
    
    <!-- 粒子背景 -->
    <div class="particles" ref="particles"></div>
    
    <!-- 庆祝动画 -->
    <div class="confetti" v-if="showConfetti"></div>
  </div>

</template>

<script>
export default {
  data() {
    return {
     prizes: [
          { name: '一等奖', value: 'iPhone 15 Pro', icon: '../assets/iphone.svg', color: '#e6194B' },
          { name: '谢谢参与', value: '下次再来', icon: 'fas fa-smile', color: '#4ecdc4' },
          { name: '二等奖', value: 'iPad Pro', icon: 'fas fa-tablet-alt', color: '#ffd166' },
          { name: '优惠券', value: '¥200优惠券', icon: 'fas fa-ticket-alt', color: '#06d6a0' },
          { name: '三等奖', value: 'AirPods Pro', icon: 'fas fa-headphones', color: '#118ab2' },
          { name: '幸运奖', value: '京东卡¥100', icon: 'fas fa-gift', color: '#ef476f' }
        ],
        wheelRotation: 0,
        drawing: false,
        result: null,
        showConfetti: false
    };
  },
    mounted() {
        this.createParticles();
      },
    methods: {
        getWheelItemColor(index) {
          const colors = [
            '#ff6b6b', '#4ecdc4', '#ffd166', '#06d6a0',
            '#118ab2', '#4363d8', 
          ];
          return colors[index % colors.length];
        },
        startDraw() {
          if (this.drawing) return;
          
          this.drawing = true;
          this.result = null;
          this.showConfetti = false;
          
          // 随机决定中奖奖品（这里设置一等奖概率较低）
          let resultIndex;
          if (Math.random() < 0.1) {
            // 10%概率中一等奖
            resultIndex = 0;
          } else if (Math.random() < 0.3) {
            // 20%概率中二等奖
            resultIndex = 2;
          } else {
            // 其他奖品
            resultIndex = Math.floor(Math.random() * this.prizes.length);
          }
          
          // 计算旋转角度（多转几圈然后停在奖品位置）
          const extraRotations = 5; // 额外旋转圈数
          const targetRotation = 360 * extraRotations + (360 - (resultIndex * (360 / this.prizes.length))) + 180;
          
          // 设置旋转动画
          this.wheelRotation = targetRotation;
          
          // 模拟抽奖时间
          setTimeout(() => {
            this.result = this.prizes[resultIndex];
            this.drawing = false;
            this.showConfetti = true;
            
            // 5秒后关闭庆祝效果
            setTimeout(() => {
              this.showConfetti = false;
            }, 5000);
          }, 4500);
        },
        createParticles() {
          const container = this.$refs.particles;
          const particleCount = 50;
          
          for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            
            // 随机大小
            const size = Math.random() * 10 + 2;
            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;
            
            // 随机位置
            particle.style.left = `${Math.random() * 100}%`;
            particle.style.top = `${Math.random() * 100}%`;
            
            // 随机动画延迟
            particle.style.animationDelay = `${Math.random() * 15}s`;
            
            // 随机颜色
            const colors = ['#ffd700', '#ff8c00', '#ff4500', '#4ecdc4', '#06d6a0'];
            particle.style.background = colors[Math.floor(Math.random() * colors.length)];
            
            container.appendChild(particle);
          }
        }
      }
}
</script>

<style scoped>

 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #1a2a6c, #2c3e50, #4a00e0);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      color: #fff;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      position: relative;
      z-index: 10;
    }
    
    .header {
      text-align: center;
      margin-bottom: 40px;
      animation: fadeInDown 1s ease;
    }
    
    .header h1 {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 15px;
      text-transform: uppercase;
      letter-spacing: 3px;
      background: linear-gradient(to right, #ffd700, #ff8c00, #ff4500);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    }
    
    .header p {
      font-size: 18px;
      color: #e0e0e0;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }
    
    .luckdraw-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
      margin-bottom: 40px;
    }
    
    .wheel-section {
      flex: 1;
      min-width: 400px;
      position: relative;
    }
    
    .wheel-container {
      position: relative;
      width: 400px;
      height: 400px;
      margin: 0 auto;
    }
    
    .wheel {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      border: 12px solid #2c3e50;
      box-shadow: 
        0 0 30px rgba(0, 0, 0, 0.8),
        0 0 0 10px rgba(255, 215, 0, 0.5),
        0 0 0 15px rgba(0, 0, 0, 0.7),
        inset 0 0 20px rgba(0, 0, 0, 0.9);
      background: #1e3c72;
      transition: transform 4s cubic-bezier(0.17, 0.67, 0.16, 0.99);
      transform: rotate(0deg);
    }
    
    .wheel-item {
      position: absolute;
      width: 50%;
      height: 50%;
      transform-origin: bottom right;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 80px;
      padding-bottom: 20px;
      text-align: center;
      font-weight: 600;
      font-size: 16px;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
    
    .wheel-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      background: linear-gradient(145deg, #ffd700, #ff8c00);
      border-radius: 50%;
      border: 6px solid #2c3e50;
      box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.8),
        inset 0 0 10px rgba(0, 0, 0, 0.5);
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .wheel-center:hover {
      transform: translate(-50%, -50%) scale(1.05);
      box-shadow: 
        0 0 25px rgba(255, 215, 0, 0.9),
        inset 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .wheel-center:active {
      transform: translate(-50%, -50%) scale(0.95);
    }
    
    .wheel-pointer {
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 60px;
      z-index: 20;
      filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.7));
    }
    
    .wheel-pointer::before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 40px solid #ff4500;
    }
    
    .wheel-pointer::after {
      content: '';
      position: absolute;
      top: 40px;
      left: 15px;
      width: 10px;
      height: 20px;
      background: #ff4500;
      border-radius: 0 0 5px 5px;
    }
    
    .prizes-section {
      flex: 1;
      min-width: 300px;
      max-width: 500px;
      background: rgba(30, 30, 60, 0.7);
      border-radius: 20px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      animation: fadeInRight 1s ease;
    }
    
    .section-title {
      font-size: 28px;
      margin-bottom: 25px;
      text-align: center;
      color: #ffd700;
      position: relative;
      padding-bottom: 15px;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 3px;
      background: linear-gradient(to right, transparent, #ffd700, transparent);
    }
    
    .prizes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .prize-item {
      background: rgba(40, 40, 80, 0.8);
      border-radius: 15px;
      padding: 15px 10px;
      text-align: center;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 215, 0, 0.3);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    
    .prize-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
      border-color: rgba(255, 215, 0, 0.7);
    }
    
    .prize-icon {
      font-size: 36px;
      margin-bottom: 10px;
      color: #ffd700;
    }
    
    .prize-name {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .prize-value {
      font-size: 12px;
      color: #aaa;
    }
    
    .result-section {
      flex: 0 0 100%;
      background: rgba(30, 30, 60, 0.7);
      border-radius: 20px;
      padding: 30px;
      margin-top: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      animation: fadeInUp 1s ease;
    }
    
    .result-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 200px;
    }
    
    .result-title {
      font-size: 24px;
      margin-bottom: 20px;
      color: #ffd700;
      text-align: center;
    }
    
    .result-prize {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
      background: rgba(40, 40, 80, 0.8);
      border-radius: 15px;
      width: 100%;
      max-width: 600px;
      min-height: 120px;
      border: 1px solid rgba(255, 215, 0, 0.3);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    
    .result-icon {
      font-size: 48px;
      color: #ffd700;
      animation: pulse 2s infinite;
    }
    
    .result-text {
      text-align: center;
    }
    
    .result-name {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 5px;
      color: #fff;
    }
    
    .result-value {
      font-size: 18px;
      color: #ffd700;
    }
    
    .draw-btn {
      display: block;
      margin: 30px auto;
      padding: 16px 50px;
      font-size: 20px;
      font-weight: 700;
      background: linear-gradient(145deg, #ff8c00, #ff4500);
      color: white;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 
        0 5px 15px rgba(255, 69, 0, 0.4),
        0 0 20px rgba(255, 140, 0, 0.3);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    
    .draw-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: 0.5s;
      z-index: -1;
    }
    
    .draw-btn:hover {
      transform: translateY(-3px);
      box-shadow: 
        0 8px 20px rgba(255, 69, 0, 0.6),
        0 0 30px rgba(255, 140, 0, 0.5);
    }
    
    .draw-btn:hover::before {
      left: 100%;
    }
    
    .draw-btn:active {
      transform: translateY(1px);
    }
    
    .draw-btn:disabled {
      background: linear-gradient(145deg, #555, #333);
      cursor: not-allowed;
      box-shadow: none;
    }
    
    .draw-btn:disabled:hover::before {
      display: none;
    }
    
    .confetti {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1000;
    }
    
    /* 粒子背景 */
    .particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
    
    .particle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
      animation: float 15s infinite linear;
    }
    
    /* 动画 */
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes fadeInRight {
      from {
        opacity: 0;
        transform: translateX(30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    
    @keyframes float {
      0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translateY(-1000px) translateX(1000px) rotate(720deg);
        opacity: 0;
      }
    }
    
    /* 响应式设计 */
    @media (max-width: 900px) {
      .luckdraw-container {
        flex-direction: column;
        align-items: center;
      }
      
      .wheel-container {
        width: 350px;
        height: 350px;
      }
      
      .header h1 {
        font-size: 36px;
      }
    }
    
    @media (max-width: 480px) {
      .wheel-container {
        width: 300px;
        height: 300px;
      }
      
      .wheel-item {
        font-size: 14px;
        padding-left: 60px;
        padding-bottom: 15px;
      }
      
      .header h1 {
        font-size: 28px;
      }
      
      .section-title {
        font-size: 24px;
      }
    }

</style>